<template>
  <div class="user-center-config">
    <h4>我的服务</h4>
    <!-- 使用 v-if 确保在数据加载完成前不渲染，避免报错 -->
    <el-form label-position="top" v-if="config && config.services">
      <el-form-item label="排版样式">
        <el-radio-group v-model="config.services.layout">
          <el-radio label="horizontal">横排</el-radio>
          <el-radio label="vertical">竖排</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="标题名称">
        <el-input v-model="config.services.title" placeholder="例如：我的服务" />
      </el-form-item>
      <el-form-item label="菜单设置">
        <!-- 使用 draggable 实现可拖拽列表 -->
        <draggable v-model="config.services.items" handle=".drag-handle" animation="150">
          <div v-for="(item, index) in config.services.items" :key="index" class="config-item">
            <i class="el-icon-rank drag-handle" title="拖拽排序"></i>
            <el-form-item label="名称">
              <el-input v-model="item.name" placeholder="请输入菜单名称" />
            </el-form-item>
            <el-form-item label="链接">
              <el-input v-model="item.link" placeholder="请输入跳转链接" />
            </el-form-item>
            <el-form-item label="图标">
              <!-- 使用图片上传组件 -->
              <image-upload v-model="item.icon" />
            </el-form-item>
            <el-button type="danger" size="mini" @click="removeItem(index)" class="delete-btn" icon="el-icon-delete" circle></el-button>
          </div>
        </draggable>
        <el-button type="primary" plain @click="addItem" v-if="!config.services.items || config.services.items.length < 10">+ 添加菜单</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import draggable from 'vuedraggable'; // 引入拖拽库
import ImageUpload from '@/components/ImageUpload'; // 引入若依的图片上传组件

export default {
  name: "UserCenterConfig",
  components: {
    draggable,
    ImageUpload
  },
  props: {
    // 使用 v-model 接收来自父组件的配置数据
    value: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    // 创建一个可写的计算属性来代理 prop，从而实现 v-model
    config: {
      get() {
        // 在访问深层属性前，确保父级对象存在，防止渲染错误
        // 使用 $set 来保证新增的属性是响应式的
        if (!this.value.services) {
          this.$set(this.value, 'services', {
            layout: 'vertical',
            title: '我的服务',
            items: []
          });
        }
        if (!this.value.services.items) {
          this.$set(this.value.services, 'items', []);
        }
        return this.value;
      },
      set(newValue) {
        // 当内部数据变化时，通知父组件更新
        this.$emit('input', newValue);
      }
    }
  },
  methods: {
    /** 添加一个新的菜单项 */
    addItem() {
      this.config.services.items.push({
        name: '新菜单',
        link: '',
        icon: ''
      });
    },
    /** 删除一个菜单项 */
    removeItem(index) {
      this.config.services.items.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.config-item {
  position: relative;
  border: 1px dashed #d9d9d9;
  padding: 15px;
  padding-top: 40px;
  margin-bottom: 10px;
  border-radius: 4px;
  background-color: #f9f9f9;
}
.drag-handle {
  position: absolute;
  top: 10px;
  left: 10px;
  cursor: move;
  font-size: 20px;
  color: #999;
}
.delete-btn {
  position: absolute;
  top: 5px;
  right: 5px;
}
</style>
